<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body onload="init()">
        请选择网页颜色背景:
        <select onchange="changeColor()">
            <option value =""></option>
        </select>
    </body>
    
    <script type="text/javascript">
        let colors=[];
        function init(){
            let xhr=new XMLHttpRequest();
            xhr.open("get","color.xml",true);
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                    let data=xhr.responseXML;
                    colors=data.querySelectorAll("color");
                    let s=document.querySelector("select");//获得下拉列表
                    for(let i=0;i<colors.length;i++){
                        let c= colors[i].querySelector("name").textContent;
                        //将第i个元素颜色名字加入第i个选项
						//动态生成下拉列表!
                        s.options[i]=new Option(c);
                    }
                    let va=colors[0].querySelector("value").textContent;
                    document.body.setAttribute("style","background-color:"+va+";")
                }
            }
        }
		
		function changeColor(){
			//获得下拉列表中的第几个选项
			let s=document.querySelector("select");//获得下拉列表
			
			let i=s.selectedIndex;//获取下拉列表当前选中!
			let va=colors[i].querySelector("value").textContent;
			document.body.setAttribute("style","background-color:"+va+";")
		}
    </script>
</html>